const path = require('path')
const { VueLoaderPlugin } = require("vue-loader/dist/index")

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    clean: true // 每次打包前清空dist目录
  },
  // resolve配置: 配置模块的解析规则,包括模块的别名、模块的扩展名等
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts', '.jsx', '.tsx'], // 配置模块的扩展名
    alias: {
      utils: path.resolve(__dirname, './src/utils') // 配置模块的别名
    }
  },
  // module配置: 配置模块的解析规则,包括模块的加载器、解析规则等
  module: {
    rules: [
      // 1. 配置css文件的解析规则
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      },
      // 2. 配置less文件的解析规则
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
      },
      // 3. 配置图片类型文件的解析规则
      {
        test: /\.(png|jpg|gif|jpeg|svg)$/,
        // 1.打包两张图片, 并且这两张图片有自己的地址, 将地址设置到img/bgi中
        // 缺点: 多图片加载的两次网络请求
        // type: "asset/resource",

        // 2.将图片进行base64的编码, 并且直接编码后的源码放到打包的js文件中
        // 缺点: 造成js文件非常大, 下载js文件本身消耗时间非常长, 造成js代码的下载和解析/执行时间过长
        // type: "asset/inline"

        // 3.合理的规范: type: "asset"
        // 3.1.对于小一点的图片, 可以进行base64编码
        // 3.2.对于大一点的图片, 单独的图片打包, 形成url地址, 单独的请求这
        type: "asset", // type: "asset/resource" | "asset/inline" | "asset" | "asset/source" | "asset/inline-source" | "asset/resource-source"
        // parser配置: 配置图片的打包规则
        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024 // 60KB
          }
        },
        // generator 生成器配置: 配置图片的打包后的地址和文件名
        generator: {
          // 占位符
          // name: 指向原来的图片名称
          // ext: 扩展名
          // hash: webpack生成的hash
          filename: "img/[name]_[hash:6][ext]"
        }
      },
      // 4. 配置js类型文件的解析规则
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            // options: {
            //   plugins: [
            //     "@babel/plugin-transform-arrow-functions",
            //     "@babel/plugin-transform-block-scoping"
            //   ]
            // }
          }
        ]
      },
      // 5. 配置vue类型文件的解析规则
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  // plugins配置: 配置插件
  plugins: [
    new VueLoaderPlugin()
  ]
}